<template>
    <div>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shangyishou"></use>
        </svg>
        <!-- 通过组件切换控制开关播放 -->
        <svg v-if="start"  @click="play(true)" class="icon start" aria-hidden="true" >
            <use xlink:href="#icon-bofangyinle"></use>
        </svg>
        <svg v-else @click="play(false)" class="icon start" aria-hidden="true" >
            <use xlink:href="#icon-zantingyinle"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiayishou"></use>
        </svg>
    </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
    data:()=>{
        return {
            flag:true,
            like:true,
            svgStart:"#icon-bofangyinle",
            svgClose:"#icon-zantingyinle"
        }
    },
    methods:{
    play(start){
    if(start){//判断是播放还是暂停
      console.log("点击了播放");
      this.$store.commit("playMusic")
    }else{
      console.log("点击了暂停");
      this.$store.commit("pause")
    }
    },
    pushSong(){
      this.$store.commit("pushSong");//发送当前的index
    }
  },
  computed:{
      ...mapState({
        song:state => state.song,
        start:state => state.start
      })
    },
}
</script>

<style lang="scss" scoped>
@import '../assets/common.scss';
    .start{
        font-size: 45px;
    }
    div{
        font-size: 30px;
        width: 11rem;
        margin: 0 -6rem ;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>